Create a layer and a timeline animation

Create a layer and a timeline animation

The latest browsers (4.0 or later) support a new type of animation that requires no plugins or Java applets. This type of animation, called Dynamic HTML (DHTML), changes the style and positioning properties of HTML objects with JavaScript. The Dreamweaver Timeline feature saves you the trouble of writing JavaScript to create DHTML animation.

To make an object move, it must be within a new type of HTML container called a layer. Layers can be positioned at an exact location relative to the top left corner of the browser window. Layers can contain text, images, plugins, even other layers. Anything you can put in an HTML document can also be put in a layer.

1 Click the Layer button on the Object palette.

To create an animation with a timeline, you must first create a layer and move an image into it.

2 Move the pointer into the Document window and drag to create a layer in the upper right corner of the window.

The layer position appears as an empty box with a blinking cursor in the upper left corner.

Dreamweaver inserts the actual code that defines the layer at the top of the page, just after the BODY tag. The layer marker shows where the code is inserted.

3 Drag the image into the layer.

Now that you've created the layer and moved the image into it, you're ready to create the animation with a timeline.

4 Click the layer marker (not the layer itself) to select the layer.

Make sure that you have selected the layer and the image inside the layer. When the layer is selected, handles appear around it as shown in the preceding picture. Clicking in middle of the layer selects the image inside the layer instead of the layer itself.

5 Choose Modify > Add Object to Timeline.

After an alert message telling you which layer properties you can animate, the Timeline inspector appears.

The Timeline inspector represents the properties of layers over time. The bar displaying Layer1 represents the layer you just added to the timeline. The frame numbers across the top represent the passage of time. The playback head shows which frame is displayed in the Document window.

You create animation with a timeline by specifying properties (in this case the position) for an object at frames called keyframes. Dreamweaver calculates the properties for frames between keyframes.

6 Click the keyframe marker at the beginning of the bar.

The first keyframe defines the position of the layer at the beginning of the timeline.

7 In the Document window, move the layer by dragging the handle at top left corner of the layer. Move the layer to the far right side of the window, as shown in the following picture.

The layer's path appears in the Document window. Now you can define a new position for the layer at the end of the timeline.

8 Click the keyframe marker at the end of the bar.

9 In the Document window, drag the layer to the far left side of the window. Use the arrow keys to move the layer past the edge of the window and to straighten the path.

10 Hold the mouse down on the Play button to preview the animation on the page.

11 Click Autoplay to make the timeline play automatically when the page loads in a browser, click Loop to make it play continuously, and then close the Timeline inspector.

You must click Play in the Timeline inspector to make it run in the Document window. To see the timeline run on its own, you must preview the page in a browser. There are several functions that work only in a browser, including behaviors and links.

12 Choose File > Save As and save the document as Homepage.htm in the Tutorial folder.

Save the file using a different name to avoid overwriting the original files.

13 If you have not yet chosen a browser as your primary browser, choose File > Preview in Browser > Edit Browser List and choose a primary browser.

14 Choose File > Preview in Browser and then select the name of a browser from the submenu.

Dreamweaver starts the selected browser and opens your document. The timeline should loop automatically. Close the browser when you're ready to continue working in Dreamweaver.

To continue the tutorial, proceed to Create frames.

1	Click the Layer button on the Object palette.
	To create an animation with a timeline, you must first create a layer and move an image into it.
2	Move the pointer into the Document window and drag to create a layer in the upper right corner of the window.
	The layer position appears as an empty box with a blinking cursor in the upper left corner.
	Dreamweaver inserts the actual code that defines the layer at the top of the page, just after the `BODY` tag. The layer marker shows where the code is inserted.
3	Drag the image into the layer.
	Now that you've created the layer and moved the image into it, you're ready to create the animation with a timeline.
4	Click the layer marker (not the layer itself) to select the layer.
	Make sure that you have selected the layer and the image inside the layer. When the layer is selected, handles appear around it as shown in the preceding picture. Clicking in middle of the layer selects the image inside the layer instead of the layer itself.
5	Choose Modify > Add Object to Timeline.
	After an alert message telling you which layer properties you can animate, the Timeline inspector appears.
	The Timeline inspector represents the properties of layers over time. The bar displaying Layer1 represents the layer you just added to the timeline. The frame numbers across the top represent the passage of time. The playback head shows which frame is displayed in the Document window.
	You create animation with a timeline by specifying properties (in this case the position) for an object at frames called keyframes. Dreamweaver calculates the properties for frames between keyframes.
6	Click the keyframe marker at the beginning of the bar.
	The first keyframe defines the position of the layer at the beginning of the timeline.
7	In the Document window, move the layer by dragging the handle at top left corner of the layer. Move the layer to the far right side of the window, as shown in the following picture.
	The layer's path appears in the Document window. Now you can define a new position for the layer at the end of the timeline.
8	Click the keyframe marker at the end of the bar.
9	In the Document window, drag the layer to the far left side of the window. Use the arrow keys to move the layer past the edge of the window and to straighten the path.
10	Hold the mouse down on the Play button to preview the animation on the page.
11	Click Autoplay to make the timeline play automatically when the page loads in a browser, click Loop to make it play continuously, and then close the Timeline inspector.
	You must click Play in the Timeline inspector to make it run in the Document window. To see the timeline run on its own, you must preview the page in a browser. There are several functions that work only in a browser, including behaviors and links.
12	Choose File > Save As and save the document as `Homepage.htm` in the Tutorial folder.
	Save the file using a different name to avoid overwriting the original files.
13	If you have not yet chosen a browser as your primary browser, choose File > Preview in Browser > Edit Browser List and choose a primary browser.
14	Choose File > Preview in Browser and then select the name of a browser from the submenu.
	Dreamweaver starts the selected browser and opens your document. The timeline should loop automatically. Close the browser when you're ready to continue working in Dreamweaver.